<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuex-tutorial-amd</title>
    <link rel="stylesheet" href="src/assets/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="src/assets/css/md-facefont.css">
    <link rel="stylesheet" href="src/assets/js/bootstrap-material-design/css/bootstrap-material-design.css">
    <link rel="stylesheet" href="src/assets/js/bootstrap-material-design/css/ripples.min.css">
    <style>
        html ,body{
            margin: 0;
        }
        #app{
            width:1000px;
            margin: 10px auto;
        }
        .i-search {
            position: absolute;
            right: 0;
            top : 10px;
            cursor: pointer;
            z-index: 10;
        }
        .i-clear{
            position: absolute;
            right: 30px;
            top : 13px;
            cursor: pointer;
            z-index: 10;
            font-size : 16px;
            color :#777;
        }
        .i-search:hover,.i-clear:hover{
            color :#00aa9a;
        }
        .dropdown-menu{
            min-width:100%;
        }
        .jumbotron {
            text-align: center;

        }
        .jumbotron p{
            font-family: "Microsoft Himalaya";
            font-size: 14px;
        }
    </style>
</head>
<body>
    <App></App>
    <!--app模板-->
    <script type="text/x-template" id="app-template">
        <div id="app">
            <div class=".container-fluid" >
                <div class="row">
                    <div class="col-md-6">
                        <search-component></search-component>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="bs-component ">
                            <search-list :data="searchResultList"></search-list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <!-- 显示结果列表模板-->
    <script type="text/x-template" id="list-template">
        <div class="list-group">
            <div class="list-group-item" v-if="isEmpty">
                <div class="jumbotron">
                    <p>没有查到数据</p>
                </div>
            </div>
            <div class="list-group-item" v-for="item in data">
                 <div class="row-picture">
                     <img class="circle" src="src/assets/images/xiaofan.png" alt="">
                 </div>
                 <div class="row-content">
                    <h4 class="list-group-item-heading">{{item.name }} -- {{ item.type}}</h4>
                    <p class="list-group-item-text">{{item.address}}</p>
                </div>
             <div class="list-group-separator"></div>
            </div>
        </div>
    </script>

    <!--查询组件模板-->
    <script type="text/x-template" id="search-template">
        <div class="form-group">
            <div class="input-group">
                <search-group  :items="searchGroupItem"></search-group>
                <input type="text" class="form-control"  :value="searchKey" @input="update" @keyup.enter="searchAction" placeholder="搜索关键字..." >
                <span class="material-input"></span>
                <i class="material-icons i-clear" v-show="isEmptySearchKey" v-on:click.stop="clearAction">clear</i>
                <i class="material-icons i-search" v-on:click.stop="searchAction">search</i>
            </div>
        </div>
    </script>
    <!--查询组 模板-->
    <script type="text/x-template" id="searchgroup-template">
        <span class="input-group-btn">
            <a href="javascript:void(0)" data-target="#" class="btn btn-raised btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                {{curName}}
                <span class="caret"></span>
                <div class="ripple-container"></div>
            </a>
            <ul class="dropdown-menu" >
                <li v-for="item in items"><a href="javascript:void(0)" @click="menuClick(item)">{{item.name}}</a></li>
            </ul>
        </span>
    </script>


    <script src="src/require.js" data-main="src/config.js" ></script>
</body>
</html>